<template>
  <div class="background-processer">
    {{ value }}
    <styled-uploader
      v-if="!value"
      @file-uploaded="handleFileUploaded"
    ></styled-uploader>
    <image-src-prop
      v-else
      :src="value"
      @change="handleFileChange"
    ></image-src-prop>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, watchEffect } from "vue";
import ImageSrcProp from "./ImageSrcProp.vue";
import StyledUploader from "./StyledUploader.vue";
import { UploadResp } from "../extraType";

const emit = defineEmits<{
  (e: "change", p: string): void;
}>();

const props = defineProps<{
  value: string;
}>();

watchEffect(()=>{
    console.log("background-processer", props.value);
})

const handleFileUploaded = (data: UploadResp) => {
  console.log("bguploader", data);
  if (data.data) {
    emit("change", data.data.url);
  }
};
const handleFileChange = (data: string) => {
  console.log("bg change", data);
  emit("change", data);
};
</script>

<style lang="less" scoped></style>
